<template>
	<div class="album-detail maxW">
		<div class="album-nav-link">
			<router-link to="/home/albumList">优课专辑</router-link>
			<strong>
				<i>></i>
				专辑详情
			</strong>
		</div>
		<div class="album-window clear">
			<div class="album-window-l"><img :src="BASE_URL + albumData.picture" alt="专辑封面" /></div>
			<div class="album-window-r fr">
				<h2 class="albumb-w-h2">{{ albumData.name }}</h2>
				<div class="keyword-tips">
					<template v-if="albumData.keyword_arr">
						<el-tag v-for="item in albumData.keyword_arr" :key="item">{{ item }}</el-tag>
					</template>
					<template v-else>
						暂无关键字
					</template>
				</div>
				<ul>
                    <!-- <li class="albumb-study-count">
						<span class="a-tit">学校</span>
						<span class="user-count">{{ albumData.studyname ? albumData.studyname : '暂未绑定学校' }}</span>
					</li> -->
					<li class="albumb-class">
						<span class="a-tit">课程</span>
						<span class="video-count">{{ albumData.videocount }}</span>
					</li>
					<li class="albumb-study-count">
						<span class="a-tit">学习人数</span>
						<span class="user-count">{{ albumData.usercount }}</span>
					</li>
					<li class="albumb-collect">
						<span class="a-tit" v-html="is_fav == 1 ? '已收藏' : '收藏'"></span>
						<i :class="[is_fav == 1 ? 'ipng collect' : 'ipng uncollect']" title="点击收藏或取消收藏" @click="collectAlbum"></i>
					</li>
					<li class="albumb-share">
						<share :wapPath='wapPath'></share>
					</li>
				</ul>
			</div>
		</div>
		<div class="album-introduction">
			<div class="album-nav-tabs">
				<span :class="[albumTab == 1 ? 'nav-tab is-active' : 'nav-tab']" @click="taggleTabs(1)">课程目录</span>
				<span :class="[albumTab == 2 ? 'nav-tab is-active' : 'nav-tab']" @click="taggleTabs(2)">专辑介绍</span>
				<span :class="[albumTab == 3 ? 'nav-tab is-active' : 'nav-tab']" @click="taggleTabs(3)">教学大纲</span>
				<span :class="[albumTab == 4 ? 'nav-tab is-active' : 'nav-tab']" @click="taggleTabs(4)">教学评价及考核标准</span>
			</div>
			<div class="tab-panes">
				<div v-show="albumTab == 1" class="tab-pane">
		
					<ul class="album-ul">
						<li class="album-ls" v-for="(item, index) of albumListData" :key="index">
							<div class="album-tit clear">
								<span class="tit-num fl">第{{ index + 1 }}章</span>
								<div class="album-tit-name">
									<span>{{ item.album_lname }}</span>
								</div>
							</div>
							<ul>
								<li class="album-ls2 clear" v-for="(item1, index1) of item.video" :key="index1">
									<span class="tit-num fl">{{ index1 + 1 }}</span>
									<div class="ls-content clear">
										<span class="profile" :title="item1.name">{{ item1.name }}</span>
										<template v-if="item1.origin == 0">
											<i class="fr">视频</i>
											<div class="album_btns">
												<el-button type="primary" @click="downloadFile(0, item1.is_download, item1.res_id, item1.source_url)">下载</el-button>
												<!-- <el-button type="primary" @click="checkResource(0, item1.res_id,item1.status_m3u8)">查看</el-button> -->
												<el-button type="primary" @click="goToDetailPage(item1.status_m3u8, item1.res_id, `&album_id=${albumId}`)">查看</el-button>
											</div>
										</template>
										<template v-else-if="item1.origin == 1">
											<i class="fr">试卷</i>
											<div class="album_btns">
												<el-button type="primary" @click="downloadFile(1, 1, item1.res_id, item1.source_url)">下载</el-button>
												<el-button type="primary" @click="checkResource(1, item1.res_id)">查看</el-button>
											</div>
										</template>
										<template v-else>
											<i class="fr">资源</i>
											<div class="album_btns">
												<el-button type="primary" @click="downloadFile(2, item1.is_download, item1.res_id, item1.source_url)">下载</el-button>
												<el-button type="primary" @click="checkResource(2, item1.res_id)">查看</el-button>
											</div>
										</template>
									</div>
								</li>
							</ul>
						</li>
						<li class="no-data" v-if="albumListData.length === 0">
							暂无数据
						</li>
					</ul>
				</div>
				<div v-show="albumTab == 2" class="tab-pane">
					<div class="albumIntroduction clear">
						<router-link :to="{ path: '/space', query: { id: albumIntroductData.id } }" class="avatar-path" target="_blank" rel="noopener noreferrer">
							<img :src="BASE_URL + albumIntroductData.avatar_path" />
						</router-link>
						<div class="albumIntroduction-r">
							<div class="about-teacher clear">
								<div class="teacher-info fl">
									<router-link :to="{ path: '/space', query: { id: albumIntroductData.id } }" target="_blank" rel="noopener noreferrer">
										{{ albumIntroductData.name }}
									</router-link>
									<strong id="sub_name" v-if="!isMulti">{{ albumIntroductData.sub_name }}</strong>
								</div>
								<div class="introduction-try fr" v-if="user_login_id != albumIntroductData.id">
									<span id="is_relation">
										<i
											:class="[is_relation == 0 ? 'ipng focus' : 'ipng alfocus']"
											v-html="is_relation == 0 ? '关注' : '已关注'"
											@click="changeRelation(albumIntroductData.id)"
										></i>
									</span>
									<span id="teacher_call1"><i class="ipng but_chat01_up" @click="parent(albumIntroductData)">发私信</i></span>
								</div>
							</div>
							<div class="other-infos">
								<span>
									粉丝
									<i id="relation_num">{{ albumIntroductData.relation_num }}</i>
								</span>
								<span>
									课程
									<i id="video_num">{{ albumIntroductData.video_num }}</i>
								</span>
								<span>
									总播放量
									<i id="video_click">{{ albumIntroductData.video_click }}</i>
								</span>
							</div>
						</div>
					</div>
					<div class="album-profile">
						<span>专辑介绍：</span>
						<p v-html="profile == '' ? '暂无相关的介绍' : profile"></p>
					</div>
				</div>
				<div v-show="albumTab == 3" class="tab-pane">
					<div class="album-outline">
						<div class="downBtn clear" v-if="outline_path != '' && outline_name != ''">
							<el-button type="primary" class="fr" @click="downloadoutline">下载</el-button>
						</div>
						<iframe v-if="outline_url != ''" :src="BASE_URL + outline_url" style="width:100%;height:500px"></iframe>
						<div class="empty-bgc-img" v-if="outline_url == ''">
							<div class="i_resourceMask" v-if="outline_name != ''"><span>文件正在转码中无法预览</span></div>
							<div class="i_resourceMask" v-else><span>没有上传该文件</span></div>
						</div>
					</div>
				</div>
				<div v-show="albumTab == 4" class="tab-pane">
					<div class="album-appraise">
						<div class="downBtn clear" v-if="teaching_path != '' && teaching_name != ''">
							<el-button type="primary" class="fr" @click="downloadteaching">下载</el-button>
						</div>
						<iframe v-if="teaching_url != ''" :src="BASE_URL + teaching_url" style="width:100%;height:500px"></iframe>
						<div class="empty-bgc-img" v-if="teaching_url == ''">
							<div class="i_resourceMask" v-if="teaching_name != ''"><span>文件正在转码中无法预览</span></div>
							<div class="i_resourceMask" v-else><span>没有上传该文件</span></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 发私信弹窗： -->
		<chat ref="child"></chat>
	</div>
</template>
<script>
import chat from '@/components/common/chat';
import share from '@/components/common/share';
export default {
	data() {
		return {
			user_login_id: this.$g.user_id,
			albumId: this.$route.query.id,
			albumData: {},
			is_fav: 0,
			albumTab: 1,
			albumListData: [],
			albumIntroductData: {},
			profile: '',
			create_id: null,
			is_relation: 0,
			// pdf
			outline_url: '',
			outline_path: '',
			outline_name: '',
			teaching_url: '',
			teaching_path: '',
			teaching_name: ''
		};
	},
	created() {
		this.getAlbum();
		this.getAlbumList();
	},
    computed: {
		isMulti(){
			return this.$store.getters.isMulti;
		},
		wapPath(){
			const Code = sessionStorage.getItem('CheckSchoolAppCode')  
            return `${window.location.origin}/wap/home?path=albumDetails&bdShare=true&id=${this.albumId}&CheckSchoolAppCode=${Code}`;
		},	 
    },   	
	methods: {
		downloadoutline() {
            if (this.user_login_id == 0) {
                this.$message.warning('先登陆个人账号，才能进行此操作哦~');
                return false;
            }
			window.location.href = this.BASE_URL + '/index/album/albumdownload?path=' + this.outline_path + '&name=' + this.outline_name;
		},
		downloadteaching() {
            if (this.user_login_id == 0) {
                this.$message.warning('先登陆个人账号，才能进行此操作哦~');
                return false;
            }
			window.location.href = this.BASE_URL + '/index/album/albumdownload?path=' + this.teaching_path + '&name=' + this.teaching_name;
		},

		// 获取专辑数据：
		getAlbum() {
			let success = data => {
				this.albumData = data.data;
				this.is_fav = data.data.is_fav;
				this.profile = data.data.profile;
				this.create_id = data.data.create_id;
				this.getAlbumIntroduct();

				this.outline_url = data.data.outline_url;
				this.outline_path = data.data.outline_path;
				this.outline_name = data.data.outline_name;

				this.teaching_url = data.data.teaching_url;
				this.teaching_path = data.data.teaching_path;
				this.teaching_name = data.data.teaching_name;
			};
			this.$ajax({
				url: 'api/album/getalbum_info',
				method: 'get',
				params: {
					albumid: this.albumId,
					userid: this.user_login_id
				},
				func: {
					success: success
				}
			});
		},
		//收藏：
		collectAlbum() {
			let _method;
			let success = data => {
				if (this.is_fav == 0) {
					this.$message.success('收藏成功');
				} else {
					this.$message.info('已取消收藏');
				}
				this.getAlbum();
			};
			if (this.is_fav == 0) {
				this.$ajax({
					url: 'api/favourite/favourite',
					method: 'post',
					data: {
						res_id: this.albumId,
						user_id: this.user_login_id,
						origin: 3
					},
					func: {
						success: success
					}
				});
			} else {
				this.$ajax({
					url: 'api/favourite/favourite',
					method: 'delete',
					params: {
						res_id: this.albumId,
						user_id: this.user_login_id,
						origin: 3
					},
					func: {
						success: success
					}
				});
			}
		},
		// 课程目录/专辑介绍的tab切换：
		taggleTabs(num) {
			this.albumTab = num;
		},
		// 获取专辑数据：
		getAlbumList() {
			let success = data => {
				this.albumListData = data.data;
			};
			this.$ajax({
				url: 'api/album/getalbums_l',
				method: 'get',
				params: {
					albumid: this.albumId
				},
				func: {
					success: success
				}
			});
		},
		// 下载：
		downloadFile(type, is_download, id, url) {
			if (url == 'null') {
				url = '';
            }
			if (is_download == 0) {
				this.$message.warning('该专辑创建者不允许下载');
				return false;
            }
            if (this.user_login_id == 0) {
                this.$message.warning('先登陆个人账号，才能进行此操作哦~');
                return false;
            }
			switch (type) {
				case 0:
					window.location.href = this.BASE_URL + '/index/openclass/videodownload?id=' + id;
					break;
				case 1:
					window.location.href = this.BASE_URL + '/index/test/download_test?id=' + id;
					break;
				case 2:
					window.location.href = this.BASE_URL + '/index/resource/resourcedownload?id=' + id;
					break;
			}
		},
		/** 查看：
		 * type(0：视频；1：试卷；2：资源)
		 */
		checkResource(type, resId, status) {
	      	let url = location.origin;
			switch (type) {
				case 1:
					url = url + "/home/albumPaper?id=" + resId;
			        window.open(url);  
					break;
				case 2:
					url = url + "/home/resourceDetail?id=" + resId;
          			window.open(url); 
					break;
			}
		},
		// 专辑介绍：
		getAlbumIntroduct() {
			let success = data => {
				this.albumIntroductData = data.data[0];
				this.is_relation = data.data[0].is_relation;
			};
			this.$ajax({
				url: 'api/user/user',
				method: 'get',
				params: {
					id: this.create_id,
					userid: this.user_login_id
				},
				func: {
					success: success
				}
			});
		},
		// 关注/取消关注：
		changeRelation(_id) {
			if (this.user_login_id == 0) {
				this.$message.error('登陆之后才能进行此操作哦');
				return false;
			}
			if (this.user_login_id == _id) {
				this.$message.error('不能关注自己哦');
				return false;
			}
			let _type, _message;
			if (this.is_relation == 1) {
				_type = 'delete';
				_message = '已取消关注';
			} else if (this.is_relation == 0) {
				_type = 'add';
				_message = '关注成功';
			}
			let success = data => {
				this.getAlbumIntroduct();
				this.$message.success(_message);
			};
			this.$ajax({
				url: 'api/user/bind_relation',
				method: 'post',
				data: {
					user_id: this.user_login_id,
					follow_id: _id,
					type: 0,
					add_delete: _type
				},
				func: {
					success: success
				}
			});
		},
		// common公用组件里面的chat.vue,发私信：
		parent(obj,type){
			if (this.user_login_id == 0) {
				this.$message.warning('请登录~')
				return
			}
			if (obj.id == this.$g.user_id || obj.user_id == this.$g.user_id) {
				this.$message.warning('不能跟自己通讯哦~')
				return
			}
			this.$refs.child.getUserChatOne(obj,type)
		},
	},
	components: {
        chat,
        share
	}
};
</script>
<style lang="scss">
.album-nav-link {
	padding: 24px 0;
	font-size: 16px;
	a {
		color: #333;
	}
	i {
		margin: 0 6px;
	}
	strong {
		color: #999;
	}
}
.album-window {
	padding-bottom: 20px;
	.album-window-l {
		display: inline-block;
		width: 470px;
		height: 270px;
		background-color: #fff;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.album-window-r {
		display: inline-block;
		box-sizing: border-box;
		width: calc(100% - 490px);
		padding: 30px 35px 0;
		height: 270px;
		background-color: #fff;
		.albumb-w-h2 {
			font-size: 18px;
			font-weight: bold;
			line-height: 24px;
			height: 30px;
		}
		.keyword-tips {
			height: 30px;
			padding: 10px 0;
			.el-tag {
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				margin-right: 8px;
			}
		}
		span {
			font-size: 14px;
		}
		.a-tit {
			display: inline-block;
			width: 80px;
			margin-right: 10px;
		}
		.albumb-class,
		.albumb-study-count {
			height: 26px;
			line-height: 26px;
		}
		.video-count {
			color: #db9c00;
		}
		.albumb-collect {
			height: 40px;
			line-height: 40px;
			.ipng {
				width: 25px;
				height: 40px;
				cursor: pointer;
			}
			.collect {
				background-position: -470px -768px;
			}
			.uncollect {
				background-position: -444px -768px;
			}
		}
		.albumb-share {
			.a-tit {
				height: 28px;
				line-height: 28px;
			}
            .share-content{
                .title{
                    margin-right: 42px;
                }
            }
		}
	}
}
.album-introduction {
	background-color: #fff;
	margin-bottom: 40px;
	.album-nav-tabs {
		// border-bottom: 1px solid #e0e0e0;
		box-shadow: 0 2px 4px 0 rgba(195, 195, 195, 0.3);
		.is-active {
			color: #338efc;
			position: relative;
		}
		.is-active::after {
			position: absolute;
			top: 0;
			right: -20px;
			content: '';
			width: 0;
			height: 0;
			border-bottom: 40px solid #edf5ff;
			border-top: 0 none;
			border-left: 0px solid transparent;
			border-right: 20px solid transparent;
		}
		.nav-tab {
			display: inline-block;
			width: 160px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			font-size: 14px;
			cursor: pointer;
		}
		.nav-tab:nth-child(1) {
			border-right: 3px solid #f3f3f3;
		}
	}
	.tab-pane {
		min-height: 400px;
		padding: 35px 40px 65px;
	}
	.album-ul {
		.album-tit {
			font-size: 14px;
			line-height: 48px;
			height: 48px;
			background: #edf5ff;
			color: #3e6099;
			border-bottom: 1px solid #efefef;
		}
		.tit-num {
			display: inline-block;
			width: 100px;
			text-align: center;
		}
		.album-ls2 {
			font-size: 14px;
			line-height: 48px;
			height: 48px;
			color: #666666;
			border-bottom: 1px solid #efefef;
			.ls-content {
				position: relative;
				.profile {
					display: inline-block;
					vertical-align: top;
					max-width: 60%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				i {
					margin-right: 5px;
				}
				.album_btns {
					display: none;
					position: absolute;
					top: 0;
					right: 0;
					.el-button {
						width: 80px;
						height: 30px;
						padding: 0;
					}
				}
			}
		}
		.ls-content:hover > .album_btns {
			display: block;
		}
		.ls-content:hover > .album-ls2 {
			background-color: #effaff;
		}
	}
	.albumIntroduction {
		border-bottom: 1px dashed #e0e0e0;
		padding-bottom: 25px;
		margin-bottom: 30px;
		.avatar-path {
			display: block;
			float: left;
			width: 128px;
			height: 128px;
			border-radius: 50%;
			overflow: hidden;
			box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
			img {
				width: 100%;
				height: 100%;
			}
		}
		.albumIntroduction-r {
			margin-left: 160px;
			.about-teacher {
				display: inline-block;
				width: 100%;
			}
			.teacher-info {
				a {
					font-size: 20px;
					color: #2f6d8c;
					font-weight: bold;
				}
				strong {
					font-size: 14px;
					line-height: 35px;
					border-radius: 30px;
					color: #ffffff;
					background: #338efc;
					padding: 7px 15px;
					margin-left: 15px;
				}
			}
			.introduction-try {
				i {
					text-align: center;
					line-height: 40px;
					color: #ffffff;
					text-indent: 25px;
					margin-left: 40px;
					cursor: pointer;
				}
				.focus {
					background-position: -381px -473px;
					width: 100px;
					height: 40px;
				}
				.alfocus {
					background-position: -271px -473px;
					width: 100px;
					height: 40px;
				}
			}
			.other-infos {
				padding-top: 20px;
				span {
					font-size: 14px;
					color: #db9c00;
					margin-right: 40px;
				}
			}
		}
	}
	.album-profile {
		font-size: 14px;
		line-height: 19px;
		padding-bottom: 80px;
		p {
			display: inline;
			color: #1d5673;
			text-align: left;
		}
	}
	.album-outline,
	.album-appraise {
		.downBtn {
			margin-bottom: 20px;
		}
	}
	.empty-bgc-img {
		display: inline-block;
		width: 100%;
		height: 500px;
		background-image: url('../../../../public/images/image08.png');
		background-size: 100%;
		position: relative;
		.i_resourceMask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.1);
			text-align: center;
			visibility: hidden;
			opacity: 0;
			-moz-transition: all 0.35s ease-in;
			-webkit-transition: all 0.35s ease-in;
			-o-transition: all 0.35s ease-in;
			transition: all 0.35s ease-in;
		}
		&:hover .i_resourceMask {
			visibility: visible;
			opacity: 1;
		}
		span {
			font-size: 24px;
			color: #ffffff;
			background: rgba(0, 0, 0, 0.1);
			border-radius: 15px;
			height: 70px;
			line-height: 70px;
			display: block;
			width: 370px;
			text-align: center;
			position: absolute;
			top: 45%;
			left: 50%;
			margin-left: -170px;
		}
	}
}


</style>
